<template>
  <div>
    <ButtonGroup :title="editorTitle" :currentStatus>
      <el-radio-group
        v-model="currentStatusIndex"
        @update:modelValue="(val) => handleChange(val as number)"
      >
        <el-radio-button :value="0" class="radioButton">
          <fa-icon style="font-size: 14px" icon="heading" />
        </el-radio-button>
        <el-radio-button :value="1" class="radioButton">
          <fa-icon style="font-size: 14px" icon="paragraph" />
        </el-radio-button>
      </el-radio-group>
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import ButtonGroup from "@/components/SurveyComs/EditItems/Common/BuutonGroup.vue";
import type { IStringStatusArr } from "@/types";
import type { IUpdateStatus } from "@/types/common";

const props = defineProps<{
  id: string;
  status: IStringStatusArr;
  isShow: boolean;
  name: string;
  statusKey: string;
  currentStatusIndex: number;
  editCom: Component;
  editorTitle: string;
}>();
console.log(toRaw(props));

const updateStatus = inject("updateStatus") as IUpdateStatus;

// - 当前选中项索引
const currentStatusIndex = ref(props.currentStatusIndex);

// - 当前选中项
const currentStatus = computed(() => props.status[props.currentStatusIndex]);
const handleChange = (val: number) => {
  updateStatus(props.statusKey, val);
};
</script>

<style scoped></style>
